<template>
    <div>
        <el-dialog title="新增菜单" :visible.sync="addDialog" width="30%" :before-close="handColse">
            <el-form :model="menuForm" :rules="rules" ref="menuForm" label-width="80px" class="demo-ruleForm">
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="menuForm.menuName"></el-input>
                </el-form-item>
                <el-form-item label="归属系统" prop="systemId">
                    <el-select v-model="menuForm.systemId" clearable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in options" :key="item.systemId" :label="item.systemName"
                            :value="item.systemId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="归属菜单" prop="menuId">
                    <el-select v-model="menuForm.menuId" clearable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="item in menus" :key="item.menuId" :label="item.menuName" :value="item.menuId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单地址">
                    <el-input v-model="menuForm.url"></el-input>
                </el-form-item>
                <el-form-item label="权限值">
                    <el-input v-model="menuForm.menuValue"></el-input>
                </el-form-item>
                <el-form-item label="按钮类型">
                    <el-radio-group v-model="menuForm.type">
                        <el-radio :label="1">目录</el-radio>
                        <el-radio :label="2">菜单</el-radio>
                        <el-radio :label="3">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.number="menuForm.sort"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handColse()">取 消</el-button>
                <el-button type="primary" @click="addSumbit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default{
    data () {
        var checkSort = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('排序不能为空'));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    callback();
                }
            }, 100);
        };
        var checkMenuName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('菜单名称不能为空'));
            } else {
                callback();
            }
        }
        var checkSystemId = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('归属系统不能为空'));
            } else {
                callback();
            }
        };
        return{
            menuForm: {
                menuName: '',
                systemId: '',
                menuId: '',
                url: '',
                menuValue: '',
                type: 1,
                sort: ''
            },
            options: [{
                systemId: 1,
                systemName: '黄金糕'
            }, {
                systemId: 2,
                systemName: '双皮奶'
            }, {
                systemId: 3,
                systemName: '蚵仔煎'
            }, {
                systemId: 4,
                systemName: '龙须面'
            }, {
                systemId: 5,
                systemName: '北京烤鸭'
            }],
            rules: {
                sort: [
                    { required: true, validator: checkSort, trigger: 'blur' },
                ],
                menuName: [
                    { required: true, validator: checkMenuName, trigger: 'blur' },
                ],
                systemId: [
                    { required: true, validator: checkSystemId, trigger: 'blur' },
                ]

            },
        }
    },
    props:{
        addDialog:{
            type: Boolean,
            default: false
        },
        menus:{
            type:Array,
            default:[]
        }
    },
    methods:{
        addSumbit() {
            let data = this.menuForm;
            let newData = {
                "parentId": data.menuId,
                "menuName": data.menuName,
                "type": data.type,
                "systemId": data.systemId,
                "url": data.url,
                "menuValue": data.menuValue,
                "sort": data.sort
            }

            this.$refs.menuForm.validate((valid) => {
                if (valid) {
                    this.$http({
                        method: 'post',
                        url: '/admin/menu/add',
                        Headers: {
                            'Content-Type': 'application/json'
                        },
                        data: newData
                    }).then(res => {
                        let result = res.data;
                        this.insertDialogVisible = false
                        if (result.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            })
                            this.handColse();
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handColse() {
            //this.$refs[fromName].resetFields();
            this.$emit("insertDialogFormVisible", false);
        }
      
    }
}
</script>